package com.sy.musicapp.ui.playlist

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.KeyboardArrowLeft
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.sy.musicapp.model.Music
import com.sy.musicapp.model.MusicViewModel
import com.sy.musicapp.ui.common.MusicListItem
import com.sy.musicapp.ui.common.noRippleClickable
import com.sy.musicapp.ui.theme.Global

/**
 * 歌曲列表
 * @author SY
 * @since 2022-02-19 15:26
 **/
@ExperimentalAnimationApi
@Composable
fun PlaylistScreen(
    key: String,
    navController: NavController,
    music: List<Music>,
    musicModel: MusicViewModel,
    onItemClick: (Int) -> Unit,
    onItemAddNext: (Music) -> Unit
) {

        val currentPlay: Music by musicModel.currentMusic.collectAsState()
        LazyColumn(
            contentPadding = PaddingValues(10.dp),
            verticalArrangement = Arrangement.spacedBy(10.dp),
            state = rememberLazyListState()
        ) {
            item {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        imageVector = Icons.Outlined.KeyboardArrowLeft,
                        contentDescription = "back",
                        tint = Global.colors.onPrimary,
                        modifier = Modifier.noRippleClickable {
                            navController.popBackStack()
                        })
                    Text(text = key, color = Global.colors.onPrimary)
                }
            }
            itemsIndexed(music,
                { index: Int, _: Music -> index }) { index: Int, item: Music ->
                MusicListItem(
                    music = item,
                    action = currentPlay,
                    isShowImgOnDefault = currentPlay.id == item.id,
                    itemClick = {
                        onItemClick(index)
                    },
                    itemIconClick = {
                        onItemAddNext(item)
                    }
                )
            }
        }
}